<!-- 严重交通违法行为考核-->
<template>
    <Layout>
        <Form ref="form1" :model="dataToQuery" :label-width="120">
            <Row class="query-form">
                <Col span="8">
                <FormItem label="二级集团：">
                    <two-level-org org-code class="query-form-el" @on-change-name="changeTwoLevelOrgName"
                        v-model="dataToQuery.twoLevelOrgCode" />
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="单位名称：" prop="order">
                    <!--                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>-->
                    <Input class="query-form-el" type="text" v-model="dataToQuery.companyName"></Input>
                </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                <FormItem label="季度：" prop="quarter">
                    <Select v-model="dataToQuery.quarter" placeholder="请选择季度">
                        <Option v-for="(option, index) in quarterList" :value="option.value" :key="index">
                            {{ option.label }}</Option>
                    </Select>
                </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                <FormItem label="年度：" prop="year">
                    <DatePicker class="query-form-el" type="year" placeholder="请选择年度" v-model="dataToQuery.year1"
                        :clearable="false"
                        @on-change="() => { if (dataToQuery.year1 instanceof Date) { dataToQuery.year = dataToQuery.year1.getFullYear().toString() } }">
                    </DatePicker>
                </FormItem>
                </Col>
                <Col span="8">
                <FormItem label="车牌号：" prop="plateNumber">
                    <Input class="query-form-el" type="text" v-model="dataToQuery.plateNumber"></Input>
                </FormItem>
                </Col>
                <Col span="8">
                <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                <download-button :api="exportUrl" :query-form="dataToQuery" />
                <!--<Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出</Button> -->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
            :loading='pageStatus.loading' border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
            <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
                show-elevator />
            <Page style="float: right" :total="pagedata.total" :pagex-size="pagedata.pageSize" @on-change="pageChange"
                @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
                show-elevator />
            </Col>
        </Row>
        <Modal title="严重交通违法信息修改" :transfer=false v-model="model1" :width=600>
            <Row>
                <Col span="24">
                <Form ref="form1datacopy" :model="form1datacopy"  label-position="top">
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="23">
                        <FormItem label="单位名称：" prop="companyId">
                            <cascaderDom class="query-form-el" style="padding-top: 4px;width: 100%;" ref="carOrg"
                                @setOrgInfo="setOrgId" @setOrgName="setOrgName" :currentOrgId="form1datacopy.companyId"
                                :currentOrgName="form1datacopy.companyName" :orgTree="true"></cascaderDom>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="11">
                        <FormItem label="年份：" prop="year">
                            <Input type="text" v-model="form1datacopy.year"></Input>
                        </FormItem>
                        </Col>
                        <Col span="11">
                        <FormItem label="季度：" prop="quarter">
                            <Input type="text" v-model="form1datacopy.quarter"></Input>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="11">
                        <FormItem label="车牌号：" prop="plateNumber">
                            <Input type="text" v-model="form1datacopy.plateNumber"></Input>
                        </FormItem>
                        </Col>
                        <Col span="11">
                        <FormItem label="编号：" prop="penaltyNum">
                            <Input type="text" v-model="form1datacopy.penaltyNum"></Input>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="23">
                        <FormItem label="违法扣分：" prop="score">
                            <InputNumber v-model="form1datacopy.score" :min="0" style="width: 100%;"></InputNumber>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-around" class="code-row-bg">
                        <Col span="23">
                        <FormItem label="罚款金额/元：" prop="penalty">
                            <InputNumber v-model="form1datacopy.penalty" :min="0" style="width: 100%;"></InputNumber>
                        </FormItem>
                        </Col>
                    </Row>
                </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="primary" class='ivu-btn-save' :loading="buttonLoading" @click="submit('form1datacopy')">
                    确定
                </Button>
                <Button type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
import { Api } from '@/api/index.js'
import { formatDate } from '@/tools/index'
var cascaderDom = () => import('@/components/cascader-dom.vue');
import pageCommonFunction from '@/components/pageCommonFunction.js'
import { sessionStorage, cookie } from '@/common/cacheUtils.js';
export default {
    components: { cascaderDom },
    data() {
        return {
            ...this.createCommonDataField(),
            columns: [
                { title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender },
                { key: 'companyName', title: '单位名称', align: 'center', minWidth: 200, },
                { key: 'year', title: '年份', align: 'center', minWidth: 70, },
                {
                    key: 'quarter', title: '季度', align: 'center', minWidth: 80,
                    render: (h, params) => { return h('span', params.row.quarter + "季度"); }
                },
                { key: 'plateNumber', title: '号牌号码', align: 'center', minWidth: 120, },
                { key: 'score', title: '违法扣分', align: 'center', minWidth: 80, },
                { key: 'penalty', title: '罚款金额/元', align: 'center', minWidth: 100, },
                { key: 'violationNum', title: '违法次数', align: 'center', minWidth: 80, },
                {
                    key: 'penaltyNum', title: '编号', align: 'center', minWidth: 80,
                    render: (h, params) => { return h('span', params.row.year + '-' + params.row.penaltyNum) }
                },
                // this.getActionColumns(),
                {
                    title: '操作', key: 'action', fixed: 'right', width: 220, align: 'center',
                    render: (h, params) => {
                        return h('div', [

                            h('A', {
                                props: { type: 'primary', size: 'small' },
                                disabled: true,
                                style: { fontSize: '14px' },
                                on: {
                                    click: () => {
                                        this.editData(params.row);
                                    }
                                }
                            }, '修改'),
                            h('Divider', { props: { type: 'vertical' } }, ''),
                            h('A', {
                                props: { type: 'primary', size: 'small' },
                                style: { fontSize: '14px', color: 'red' },
                                on: {
                                    click: () => {
                                        this.deleteData(params.row);
                                    }
                                }
                            }, '删除'),
                            h('Divider', { props: { type: 'vertical' } }, ''),
                            h('A', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    fontSize: '14px',
                                },
                                on: {
                                    click: () => {
                                        this.downLoad(params.row);
                                    }
                                }
                            }, '下载处罚单')
                        ]);
                    }
                }
            ],
            tableHeight: 10,
            dictMap: {},
            // api
            queryUrl: Api.querySaTraff.replace('{{table}}', 'penalty'),
            exportUrl: Api.exportSaTraff.replace('{{table}}', 'penalty'),
            deleteUrl: Api.deleteSaTraff.replace('{{table}}', 'penalty'),
            // getUrl:Api.getSaTraff.replace('{{table}}','penalty'),
            updateUrl:Api.updateSaTraff.replace('{{table}}','penalty'),
            // saveUrl:Api.saveSaTraff.replace('{{table}}','penalty'),
            // uploadUrl:Api.uploadSaTraff.replace('{{table}}','penalty'),
            form1datacopy: {},
            model1: false,
            buttonLoading: false,
            currentUser: JSON.parse(sessionStorage('userId').get('userId')),

            quarterList: [
                { value: '一', label: '一季度' },
                { value: '二', label: '二季度' },
                { value: '三', label: '三季度' },
                { value: '四', label: '四季度' }
            ],

        }
    },
    computed: {
        isResult() {
            return this.$route.name
        },
        columns1() {
            const columns = [...this.columns];
            const columns1 = []
            columns.forEach(item => {
                if (this.isResult === 'saPenaltyMany') {
                    if (item.key !== 'score') {
                        columns1.push(item)
                    }
                } else {
                    if (item.key !== 'violationNum') {
                        columns1.push(item)
                    }
                }
            })
            return columns1
        },
    },
    async mounted() {
        this.setTableHeight();
        this.dataToQuery.year1 = new Date()
        this.dataToQuery.year = new Date().getFullYear().toString()
        this.query();
    },
    methods: {
        ...pageCommonFunction,
        changeTwoLevelOrgName(data) {
            this.dataToQuery.twoLevelOrgName = data;
        },
        setOrgId(data) {
            this.form1datacopy.companyId = data[data.length - 1];
        },
        setOrgName(data) {
            this.form1datacopy.companyName = data;
        },

        downLoad(row) {
            this.isSpin = true;
            this.$http.get(this.exportUrl.replace('list', row.penaltyId), {
                responseType: 'arraybuffer'
            }).then((res) => {
                const aLink = document.createElement("a");
                let blob = new Blob([res.data], {
                    type: "application/msword"
                })
                aLink.href = URL.createObjectURL(blob);
                aLink.download = row.companyName + (row.penaltyType === 3 ? "一车多起交通违法考核单.docx" : "严重交通违法考核单.docx") //标题
                /*
                if(this.dataToQuery.companyName)
                    aLink.download = this.dataToQuery.companyName + (row.penaltyType===3?"一车多起交通违法处罚单.docx":"严重交通违法处罚单.docx") //标题
                  else if(this.dataToQuery.twoLevelOrgName)
                    aLink.download = this.dataToQuery.twoLevelOrgName + (row.penaltyType===3?"一车多起交通违法处罚单.docx":"严重交通违法处罚单.docx") //标题
                  else
                    aLink.download =  (row.penaltyType===3?"一车多起交通违法处罚单.docx":"严重交通违法处罚单.docx") //标题
                 */
                aLink.click();
                document.body.appendChild(aLink);
                this.isSpin = false;
            }).catch(e => {
                this.$Message.error("数据获取失败");
                this.isSpin = false;
            })
        },
        handleCancel(){
            this.model1 = false;
        },
        /**
         * 编辑数据
         *
         * @param row 数据行对象
         * @returns 无返回值
         */
        editData(row) {
            this.form1datacopy =  JSON.parse(JSON.stringify(row));
            this.model1 = true;
        },
        /**
         * 删除数据
         *
         * @param row 表格行数据
         * @returns 无返回值
         */
        deleteData(row) {
            this.$http.delete(this.deleteUrl + "/" + row.penaltyId).then((res) => {
              this.$Message.success('删除成功');
              this.query();
            }).catch(e => {
              this.$Message.error("数据删除失败")
            });
        },
        query() {
            this.dataToQuery.penaltyType = '0'
            this.queryAjax();
        },
        reset1() {
            this.dataToQuery = {
                year1: new Date(),
                year: new Date().getFullYear().toString(),
                penaltyType: '0'
            };
            if (this.$refs.queryOrgCascader) {
                this.$refs.queryOrgCascader.resetCurrentOrg();
            }
            this.pagedata.currentPage = 1
            this.query()
        },
        submit(name) {
            this.buttonLoading = true;
            this.$http.post(this.updateUrl, this.form1datacopy).then((res) => {
              if (res.status === 200) {
                this.$Message.success('成功');
                this.model1 = false;
                this.query();
              }
              this.buttonLoading = false;
            })
        },
        createEmptyDataToAdd() {
            return {
                createDate: new Date(),
                createUserId: this.currentUser.userId,
                createUserName: this.currentUser.userName,
                id: this.get_uuid(),
                score: null,
                // idFiles:[],

            }
        },
        // async afterDataToViewInit() {
        //     await this.getFiles('id');
        // },
    },
    watch: {
        '$route.name': function () {
            this.reset1()
        },
        "model1": function (qw, er) {
            if (qw && this.model1) {
                setTimeout(() => {
                    this.$refs.carOrg.setCurrentOrg();
                }, 100)
            } else {
                this.$refs.carOrg.setCurrentOrg();
            }
        },

    },
}
</script>

<style lang='css' scoped>
.ivu-form-item {
    padding-right: 20px;
}

.query-form-el,
.ivu-date-picker,
.ivu-input-wrapper {
    width: 100%;
}
</style>
